<template>
	<div class="div-user-sum">
		<div class="div-user-top">
			<span>组织管理</span>
		</div>
		<el-button type="primary" style="margin:0 0 10px 10px" @click="openAddDept(0)" icon="el-icon-circle-plus-outline">添加组织</el-button>
		<div style="margin: 10px;">
			<el-table :data="tableDate" style="width: 100%" row-key="id" border :tree-props="treeProps">
				<el-table-column prop="name" label="组织名称">
					<template slot-scope="scope">
						{{scope.row.name}}{{scope.row.resourceList?'（'+scope.row.resourceList.length+'）':""}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" @click="openEditDept(scope.row)" plain size="small" v-if="scope.row.resourceList">编辑</el-button>
						<el-button type="danger" @click="removeRouter(scope.row.id)" size="small" v-if="scope.row.resourceList">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="添加组织" :show-close='false' :close-on-press-escape='false' :close-on-click-modal="false" :visible.sync="addDeptDialog" width="350px">
			<el-form :model="addForm" :rules="rules" ref="addForm">
				<el-form-item label="组织名称" prop="name" :label-width="labelWidth">
					<el-input v-model="addForm.name" placeholder="请输入组织名称" clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="组织编号" prop="orderNum" :label-width="labelWidth">
					<el-input v-model="addForm.orderNum" placeholder="请输入组织编号" clearable>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDeptReset">取 消</el-button>
				<el-button type="primary" @click="toAddDept" :disabled='dataloading'>确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="编辑组织" :show-close='false' :close-on-press-escape='false' :close-on-click-modal="false" :visible.sync="editDeptDialog" width="350px">
			<el-form :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="组织名称" prop="name" :label-width="labelWidth">
					<el-input v-model="editForm.name" placeholder="请输入组织名称" clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="组织编号" prop="orderNum" :label-width="labelWidth">
					<el-input v-model="editForm.orderNum" placeholder="请输入组织编号" clearable>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editRouterReset">取 消</el-button>
				<el-button type="primary" @click="editDept">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { getByDeptParent , deptList, deptGet, addDept, updateDept, deleteDept } from '@/api/sysDept.js'
	export default {
		name: 'Dept',
		data() {
			var checkNumber = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('请填写数字'));
				} else if(isNaN(Number(value))) {
					return callback(new Error('请填写数字'));
				} else if(!Number.isInteger(Number(value))) {
					return callback(new Error('请输入整数'));
				} else {
					return callback();
				}
			};
			return {
				tableDate: [],
				dataloading:false,
				addDeptDialog: false,
				editDeptDialog: false,
				labelWidth:'90px',
				treeProps: {
					children: 'resourceList',
					hasChildren: null
				},
				addForm: {
					parentId: '',
					name: '',
					orderNum: '',
				},
				editForm: {
					deptId: '',
					name: '',
					orderNum: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入组织名称'
					}],
					orderNum: [{
						validator: checkNumber,
						trigger: 'blur'
					}, {
						required: true,
						message: '请输入组织序号'
					}]
				},
			}
		},
		created() {
			this.getDeptList();
		},
		methods: {
			getRow(item){
				console.log(item)
			},
			getDeptList() {
				getByDeptParent({}).then(async res => {
					this.tableDate = res.data
				})
			},
			openAddDept(parentId) {
				this.addDeptDialog = true;
				this.addForm.parentId = parentId;
			},
			toAddDept() {
				this.dataloading = true;
				setTimeout(_ => {
					this.dataloading = false;
				}, 1000)
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						addDept({
							parentId: this.addForm.parentId,
							name: this.addForm.name,
							delFlag: 1,
							orderNum: this.addForm.orderNum,
						}).then(async res => {
							if(res.code === 'OK') {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.getDeptList();
								this.addDeptReset();
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								});
							}
						})
					}
				})
			},
			addDeptReset() {
				this.addDeptDialog = false;
				this.$refs.addForm.resetFields();
				this.$refs.addForm.clearValidate()
			},
			openEditDept(item) {
				deptGet({
					id: item.id
				}).then(res => {
					this.editDeptDialog = true;
					this.editForm.deptId = item.id;
					this.editForm.name = res.data.name;
					this.editForm.orderNum = res.data.orderNum;
				})
			},
			editDept() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						updateDept({
							deptId: this.editForm.deptId,
							name: this.editForm.name,
							orderNum: this.editForm.orderNum,
						}).then(async res => {
							if(res.code === 'OK') {
								this.$message({
									message: '编辑成功',
									type: 'success'
								});
								this.getDeptList();
								this.editRouterReset();
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								});
							}
						})
					}
				})
			},
			editRouterReset() {
				this.editDeptDialog = false;
				this.$refs.editForm.resetFields();
				this.$refs.editForm.clearValidate()
			},
			removeRouter(deptId) {
				this.$confirm('是否删除该组织?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteDept({
						deptId: deptId
					}).then(async res => {
						if(res.code === "OK") {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getDeptList();
						} else {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>
